$(".headerBox").load("http://localhost:3000/public/header.html .zxt_header")
$(".footerBox").load("http://localhost:3000/public/header.html .zxt_footer")


console.log(123)

    // 图片数据
    const imgs = [{
        m:"./images/oneplus/2.png",
        l:"./images/oneplus/2.png",
    },{
        m:"./images/oneplus/3.png",
        l:"./images/oneplus/3.png",
    },{
        m:"./images/oneplus/4.png",
        l:"./images/oneplus/4.png",
    }];
    // 点击小图切换中图和大图
    function Tab(){
        this.li = document.querySelectorAll(".cont li");
        this.sImg = document.querySelector(".small_box img");
        this.bImg = document.querySelector(".big_box img");
        this.data = imgs;
        this.index = 0;
        this.addEvent();
    }
    Tab.prototype.addEvent = function(){
        const that = this;
        for(let i=0;i<this.li.length;i++){
            this.li[i].xuhao = i;
            this.li[i].onclick = function(){
                that.hide();
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.hide = function(){
        this.li[this.index].className = "";
    }
    Tab.prototype.getIndex = function(now){
        this.index = now.xuhao;
        this.show();
    }
    Tab.prototype.show = function(){
        this.li[this.index].className = "active";
        this.sImg.src = this.data[this.index].m;
        this.bImg.src = this.data[this.index].l;
    }
    new Tab();






    // 放大镜功能
    class Magnifier{
        constructor(){
            this.sBox = document.querySelector(".small_box");
            this.sSpan = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");
            this.addEvent();
        }
        move(aaa){
            let l = aaa.x - this.sSpan.offsetWidth/2;
            let t = aaa.y - this.sSpan.offsetHeight/2;
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init(){
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";7
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";

        }
        addEvent(){
            var that = this;
            this.sBox.onmouseenter = function(){
                that.show();
            }
            this.sBox.onmouseleave = function(){
                that.hide();
            }
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                const pos = {
                    x:e.offsetX,
                    y:e.offsetY
                };
                that.move(pos);
            }
        }
        show(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            this.init();
        }
        hide(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }
    new Magnifier();






    var mSpan = document.getElementById('model').getElementsByTagName('span');
    var cSpan = document.getElementById('color').getElementsByTagName('span');
    var rSpan = document.getElementById('rom').getElementsByTagName('span');
    var bSpan = document.getElementById('banben').getElementsByTagName('span');
    var aSpan = document.getElementsByTagName('span');
    var oModel = document.getElementById('model');
    var oRom = document.getElementById('rom');
    var oPrice = document.getElementById('price');

    mSpan[0].className = 'on';
    cSpan[0].className = 'on';
    rSpan[0].className = 'on';
    bSpan[0].className = 'on';

    for (var i=0;i<aSpan.length;i++ )
    {
        
        aSpan[i].onclick = function(){
            var siblings = this.parentNode.children;
            for (var j=0;j<siblings.length;j++ )
            {
                siblings[j].className = '';
            }
            this.className = 'on';
            
            if ( this.parentNode == oModel || this.parentNode == oRom )
            {
                price();
            }
        };
    };

    function price(){
        var p1 = 0;
        var p2 = 0;
        for (var i=0;i<mSpan.length;i++ )
        {
            if ( mSpan[i].className == 'on' )
            {
                // p1 = i?3299:2199;
                // break;

                switch ( i )
                {
                    case 0:
                        p1 = 2199;
                        break;
                    case 1:
                        p1 = 2299;
                        break;
                    case 2:
                        p1 = 2399;
                        break;
                    case 3:
                        p1 = 2499;
                        break;
                    case 4:
                        p1 = 3599;
                        break;
                }
            };
        };
        for (var i=0;i<rSpan.length;i++ )
        {
            if ( rSpan[i].className == 'on' )
            {
                switch ( i )
                {
                    case 0:
                        p2 = 0;
                        break;
                    case 1:
                        p2 = 400;
                        break;
                    case 2:
                        p2 = 800;
                        break;
                }
            }
        };
        oPrice.innerHTML = p1+p2;
    };





